<template>
      <div>
        <div>
          <el-form :inline="true" :model="formSearch" class="demo-form-inline">
            <el-form-item label="森林ID">
              <el-input v-model="formSearch.uid" placeholder="请输入森林ID"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="formSearch.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="formSearch.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="用户类型">
              <el-select v-model="formSearch.user_type" placeholder="请选择用户类型">
                <el-option label="全部" :value="null"></el-option>
                <el-option label="普通会员" value="1"></el-option>
                <el-option label="超级会员" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchClick">查询</el-button>
              <el-button type="danger" @click="clearClick">清空</el-button>
            </el-form-item>
          </el-form>

        </div>
        <div>
          <el-table
              :data="tableData"
              stripe
              border
              style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="user-table-expand">
                  <el-form-item label="姓名">
                    <span>{{ props.row.name }}</span>
                  </el-form-item>
                  <el-form-item label="学号">
                    <span>{{ props.row.stuid }}</span>
                  </el-form-item>
                  <el-form-item label="性别">
                    <span>{{ props.row.sex }}</span>
                  </el-form-item>
                  <el-form-item label="班级">
                    <span>{{ props.row.classid }}</span>
                  </el-form-item>
                  <el-form-item label="籍贯">
                    <span>{{ props.row.native }}</span>
                  </el-form-item>
                  <el-form-item label="住址">
                    <span>{{ props.row.address }}</span>
                  </el-form-item>
                  <el-form-item label="email">
                    <span>{{ props.row.email }}</span>
                  </el-form-item>
                  <el-form-item label="生日">
                    <span>{{ props.row.birthday }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
                prop="id"
                label="ID"
                sortable
                width="50px">
            </el-table-column>
            <el-table-column
                prop="uid"
                label="森林号"
                width="120px">
            </el-table-column>
            <el-table-column
                prop="username"
                label="姓名"
                sortable
                width="120px"
                >
            </el-table-column>
            <el-table-column
                prop="user_pic"
                label="头像"
                width="80px">
              <template slot-scope="scope">
                <el-avatar :src="baseURL+scope.row.user_pic"></el-avatar>
              </template>
            </el-table-column>
            <el-table-column
                prop="phone"
                label="手机号"
                width="100px">
            </el-table-column>
            <el-table-column
                prop="user_type"
                label="类型"
                width="100px">
              <template slot-scope="scope">
                <el-tag
                    :type="scope.row.user_type === 1 ? 'primary' : 'success'"
                    disable-transitions>{{scope.row.user_type === 1?'普通用户' : '会员用户'}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
                prop="payment"
                label="余额"
                width="50px">
              <template slot-scope="scope">
                {{scope.row.payment.toFixed(2)}}
              </template>
            </el-table-column>
              <el-table-column
                  prop="create_time"
                  sortable
                  label="注册时间"
                  width="180px">
              </el-table-column>
            <el-table-column
                prop="user_state"
                label="状态"
                sortable
                width="100px">
              <template slot-scope="scope">
              <StateCircle :state="scope.row.user_state === 'ONLINE'"></StateCircle>
                {{scope.row.user_state === 'ONLINE'?'正常' : '关闭'}}
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                >
              <template slot-scope="scope">
                <el-button v-if="scope.row.user_state === 'ONLINE'" type="warning" plain @click="offlineClick(scope.row.uid,'OFFLINE')">拉黑</el-button>
                <el-button v-else type="warning" plain @click="offlineClick(scope.row.uid,'ONLINE')">取消拉黑</el-button>
                <el-button type="primary" plain @click="updateClick(scope.row)">编辑</el-button>
                <el-button type="info" plain @click="updatePassClick(scope.row.uid)">修改密码</el-button>
                <el-button type="danger" plain @click="deleteClick(scope.row.uid)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              layout="prev, pager, next"
              :total="total">
          </el-pagination>
        </div>

<!--        修改框-->
        <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">
          <el-form :model="updateForm" label-position="right" label-width="80px">
            <el-form-item label="森林ID" >
              <el-input v-model="updateForm.uid" disabled autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户名" >
              <el-input v-model="updateForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="头像" >
              <el-upload
                  class="avatar-uploader"
                  :action="baseURL+'/api/file/upload'"
                  :show-file-list="false"
                  :limit="1"
                  :headers="headers"
                  :before-upload="beforeAvatarUpload"
                  :on-success="handleAvatarSuccess">
                <img :src="baseURL+updateForm.user_pic" class="avatar">
              </el-upload>
            </el-form-item>
            <el-form-item label="手机号" >
              <el-input v-model="updateForm.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="类型" >
              <el-select v-model="updateForm.user_type">
                <el-option label="普通用户" value="1"></el-option>
                <el-option label="超级会员" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" >
              <el-switch
                  v-model="updateForm.user_state === 'ONLINE'"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  disabled>
              </el-switch>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateUserEvent">确 定</el-button>
          </div>
        </el-dialog>
      </div>
</template>

<script>
import {getUserList,editUser,editUserPass} from '@/request'
import StateCircle from "@/components/StateCircle";
import {mapState} from 'vuex'
export default {
  name: "userList",
  data(){
    return{
      headers: {  // 请求头部参数
        Authorization:this.$store.state.token.tokenn,
      },
      tableData: [],
      params:{},
      updateForm:{},
      dialogFormVisible:false,
      formSearch:{
        uid:null,
        username:null,
        phone:null,
        user_type:null
      },
      pagenum:0,
      total:0
    }
  },
  computed:{
    ...mapState(['token']),
  },
  components:{
    StateCircle
  },
  created() {
    this.getuserList();
  },
  methods:{
      async getuserList(){
          if(this.pagenum*10>this.total)return;
          this.pagenum++;
          this.formSearch['pagenum']=this.pagenum;
          let data=await getUserList(this.formSearch);
          if(data.code!=200)return this.$message.error(data.msg);
          this.tableData=data.data.list;
          this.total=data.data.total;
      },
    searchClick(){
      this.init();
      this.getuserList();
    },
    init(){
      this. pagenum=0
      this.total=0
    },
    clearClick(){
      this.formSearch={
            uid:null,
            username:null,
            phone:null,
            user_type:null
      }
      this.init();
      this.getuserList();
    },
     offlineClick(uid,user_state){
      this.$confirm('您将拉黑该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        let data=await editUser({uid,user_state});
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('成功!');
        this.searchClick();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    updatePassClick(uid){
      if(!(this.$store.state.user&&this.$store.state.user.admin_grade>1))return this.$message.error("您的权限不足！")
      this.$prompt('请输入新密码', '提示', {
        confirmButtonText: '确定',
        inputType:"password",
        cancelButtonText: '取消',
        inputPattern: /^[\w+]{3,16}$/,
        inputErrorMessage: '密码格式不正确'
      }).then(async ({ value }) => {
        let data=await editUserPass({uid,password:value})
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('修改成功!');
        this.searchClick();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消更改'
        });
      });
    },
    updateClick(item){
      this.dialogFormVisible=true;
      this.updateForm={
        uid:item.uid,
        username:item.username,
        user_pic:item.user_pic,
        phone:item.phone,
        user_type:item.user_type,
        user_state:item.user_state,
      };
    },
    async updateUserEvent(){
      console.log(this.updateForm);
      let data=await editUser(this.updateForm);
      if(data.code!=200)return this.$message.error(data.message);
      this.$message.success(data.message);
      this.searchClick();
      this.dialogFormVisible=false;
    },
    deleteClick(uid){
      this.$confirm('您将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data=await editUser({uid,is_delete:1});
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('删除成功!');
        this.searchClick();

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleAvatarSuccess(res) {
      if (res.code === 200) {
        this.updateForm.user_pic = res.data.filepath;
      } else {
        this.$message.error(res.message)
      }
    },
    beforeAvatarUpload(file){
      const isLt1M = file.size / 1024 / 1024
      if (isLt1M > 1) {
        this.$message.error('上传头像图片大小不能超过1MB')
      }
      return isLt1M
    },
  }
}
</script>

<style>
.user-table-expand {
  font-size: 0;
  margin: 10px 60px;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.user-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.user-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>